<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用jQuery实现返回到顶部</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    #toTop {
        display: none;
        position: fixed;
        bottom: 5px;
        right: 5px;
        width: 64px;
        height: 64px;
        background-image: url('images/up.png');
        background-repeat: no-repeat;
        opacity: 0.4;
    }

    #toTop:hover {
        opacity: 0.8;
    }
    </style>
</head>

<body>
    <h1>使用jQuery实现返回到顶部</h1>
    <a href="#top" id="toTop"></a>
    <p>
        原理：scroll()事件触发后，判断位置，根据位置显示或隐藏按钮，点击后返回顶部。
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore perferendis asperiores ex voluptas praesentium libero odit excepturi distinctio nostrum sequi harum atque autem enim suscipit, provident quibusdam sunt ullam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore perferendis asperiores ex voluptas praesentium libero odit excepturi distinctio nostrum sequi harum atque autem enim suscipit, provident quibusdam sunt ullam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore perferendis asperiores ex voluptas praesentium libero odit excepturi distinctio nostrum sequi harum atque autem enim suscipit, provident quibusdam sunt ullam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore perferendis asperiores ex voluptas praesentium libero odit excepturi distinctio nostrum sequi harum atque autem enim suscipit, provident quibusdam sunt ullam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore perferendis asperiores ex voluptas praesentium libero odit excepturi distinctio nostrum sequi harum atque autem enim suscipit, provident quibusdam sunt ullam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore perferendis asperiores ex voluptas praesentium libero odit excepturi distinctio nostrum sequi harum atque autem enim suscipit, provident quibusdam sunt ullam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore perferendis asperiores ex voluptas praesentium libero odit excepturi distinctio nostrum sequi harum atque autem enim suscipit, provident quibusdam sunt ullam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore perferendis asperiores ex voluptas praesentium libero odit excepturi distinctio nostrum sequi harum atque autem enim suscipit, provident quibusdam sunt ullam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore perferendis asperiores ex voluptas praesentium libero odit excepturi distinctio nostrum sequi harum atque autem enim suscipit, provident quibusdam sunt ullam.</p>

    <script>
    $(function() {
        var b = $('#toTop');
        $(window).scroll(function() {
            100 < $(this).scrollTop() ? b.fadeIn() : b.fadeOut()
        });
        b.click(function(e) {
                e.preventDefault();
                $("body, html").animate({
                    scrollTop: 0
                }, 1000);
            })
    });
    </script>
</body>

</html>
